<template>
	<div class="base-toggle-group flex gap-2">
		<base-toggle
			v-for="item in data"
			:key="item.id"
			:icon="item.icon"
			:text="item.text"
			:textT="item.textT"
			:isM="isM"
			:checked="item.id === modelValue"
			@click="onClick(item.id)"></base-toggle>
	</div>
</template>

<script lang="ts" setup>
import BaseToggle from '../toggle/index.vue'
import { ToggleGroupData } from './types'
defineProps({
	modelValue: {
		type: [String, Number]
	},
	data: {
		type: Array<ToggleGroupData>,
		default: () => []
	},
	isM: {
		type: Boolean,
		default: false
	}
})

const emits = defineEmits(['update:modelValue'])

const onClick = (id: string | number) => emits('update:modelValue', id)
</script>
